<!-- components/TopNavBar.vue -->
<template>
	<view class="contents">
		<view class="user-top">
			<view style="
                display: flex;
                align-items: center;
                justify-content: center;
              ">
				<view class="back-btn" @click="handleBack">
					<image src="@/static/my/back.png" mode="aspectFill"
						style="width: 24px; height: 24px; margin: 0 11px"></image>
				</view>
			</view>
			<view class="invitationTitle">{{title}}</view>
			<view>
				<view class="hamburger" @click="toggle">
							<view :class="active == 'active' ? 'active':''"></view>
							  <svg viewBox="0 0 32 32">
							    <path class="line line-top-bottom" d="M27 10 13 10C10.8 10 9 8.2 9 6 9 3.5 10.8 2 13 2 15.2 2 17 3.8 17 6L17 26C17 28.2 18.8 30 21 30 23.2 30 25 28.2 25 26 25 23.8 23.2 22 21 22L7 22"></path>
							    <path class="line" d="M7 16 27 16"></path>
							  </svg>
							</view>
			</view>
		</view>
		<uni-popup ref="popup" :mask-click="false">
			<view class="content-popup">
				<view class="contens">
					<view class="content-header">
						<view>
							<img src="@/static/home/game.png" alt="">
							<view class="header-name">
								<view>共创社区</view>
								<view>Gc</view>
							</view>
						</view>
						
					</view>
		
					<view class="tab-lists">
						<view class="tab-list" v-for="(item,index) in tabList2" :key="index" @click="btnList(item)">
							<view>
								<img :src="item.img" alt="" width='30' height="30">
								<text class="tba-name">{{item.text}}</text>
							</view>
							<view><img src="@/static/home/xia.png" alt="" /></view>
						</view>
		
					</view>
				</view>
		<view class="popupFooter" >
			<view v-for="(item,index) in fonterImgList" :key="index" @click="toMy(index)">
				<img :src="item.img"  />
			</view>
			
		</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				active:"",
				fonterImgList:[
					{img: require('@/static/home/dt.png')},
					{img: require('@/static/home/gb.png')},
					{img: require('@/static/home/yx.png')}
					],
				tabList2: [{
					img: require('@/static/home/tab1.png'),
						text: 'Game Fi'
					},
					{
						img: require('@/static/home/tab2.png'),
						text: 'NFT市场'
					},
					{
						img: require('@/static/home/tab3.png'),
						text: 'NFT挖矿'
					},
					{
						img: require('@/static/home/tab4.png'),
						text: 'NFT铸造'
					},
					{
						img: require('@/static/home/tab5.png'),
						text: '个人中心'
					},
					{
						img: require('@/static/home/tab6.png'),
						text: '仪表盘'
					}
				],
			}
		},
		props: {
			// 标题文字
			title: {
				type: String,
				default: '我的账户'
			},
			// 左侧返回按钮图标配置

		},
		methods: {
			toMy(index){
				if(index==0){
					uni.navigateTo({
						url: '/pages/my/my'
					});
				}
			},
			//点击跳转
			btnList(e) {
				if (e.text == 'Game Fi') {
					uni.navigateTo({
						url: '/pages/game/game'
					});
				} else if (e.text == '个人中心') {
					uni.navigateTo({
						url: '/pages/my/my'
					});
				}
				else if(e.text == '仪表盘'){
					uni.navigateTo({
						url: '/pages/home/home'
					});
				}
				else {
					uni.showToast({
						title: '暂未开放',
						duration: 2000
					});
				}
			
			},
			toggle() {
				if(this.active == ''){
					this.$refs.popup.open('top')
					this.active = 'active'
				}else{
					
					this.active = ''
						this.$refs.popup.close()
				}
			},
			//关闭弹框
			btnClose() {
				this.$refs.popup.close()
			},
			
			handleBack() {
				console.log(111);
				if (this.isBacking) return;
				this.isBacking = true;
				console.log(222);
				const pages = getCurrentPages();
				if (pages.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					uni.switchTab({
						url: "/pages/home/home"
					});
				}

				// 防止快速多次点击
				setTimeout(() => {
					this.isBacking = false;
				}, 1000);
			},

			// handleBack() {
			//   this.$emit('back') // 触发返回事件
			// },
			handleIconClick(index) {
				this.$emit('icon-click', index) // 传递点击的图标索引
			}
		}
	}
</script>

<style scoped>
	.contents{
		
		margin: 13px !important;
	}
	.user-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.user-top text {
		color: rgb(255, 255, 255);
		font-family: 阿里巴巴普惠体 2;
		font-size: 20px;
		font-weight: 700;
		line-height: 28px;
	}

	.invitationTitle {
		color: rgb(255, 255, 255);
		font-family: 阿里巴巴普惠体 2;
		font-size: 20px;
		font-weight: 700;
		margin-left: 80rpx;
	}
	
	.tba-name{
	   position: relative;
	   font-size: 27px;
	   left: 12px;
	   top: -5px;
		  
	}
	.tab-list{
		width: 100%;
		height: 80rpx;
		
		margin-top: 24rpx;
		display: flex;
		justify-content: space-between;
	}
	.tab-lists{
		margin-top:200rpx;
		z-index: 9999;
	}
	.header-name{
		display: inline-block;
		margin-left:18rpx;
		font-size: 24rpx;
	}
	.content-header{
		    display: flex;
		    padding-top: 46rpx;
		    justify-content: space-between;
	}
	.contens{
		width: 87%;
		margin: 0 auto;
	}
	.content-popup{
		width: 100%;
		height: 100vh;
		background-color: rgba(17, 21, 39, 0.8);
		z-index: 9999 !important;
		position: relative;
	}


	.line {
	  fill: none;
	  stroke: white;
	  stroke-linecap: round;
	  stroke-linejoin: round;
	  stroke-width: 3;
	  /* Define the transition for transforming the Stroke */
	  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
	              stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	.line-top-bottom {
	  stroke-dasharray: 12 63;
	}
	
	.hamburger {
	  cursor: pointer;
	  position: relative;
	  z-index: 99999;
	}
	.hamburger view.active + svg {
	  transform: rotate(-45deg);
	}
	.hamburger view {
	  display: none;
	}
	
	.hamburger svg {
	  /* The size of the SVG defines the overall size */
	  height: 3em;
	  /* Define the transition for transforming the SVG */
	  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	.hamburger view.active + svg .line-top-bottom {
	  stroke-dasharray: 20 300;
	  stroke-dashoffset: -32.42;
	}
	.popupFooter{
		position: fixed;
		bottom: 60rpx;
		left: 60rpx;
		z-index: 9999;
		display: flex;
		
	}
	.popupFooter img{
		width: 60rpx;
		margin-right: 15rpx;
	}
</style>